<script setup>
import {ref,onMounted,watch} from 'vue'
import {Search, ArrowRight} from "@element-plus/icons-vue";
import SmallItemCard from "@/components/card/Small-ItemCard.vue";
import BaseDialog from "@/components/dialog/baseDialog.vue";
import {getExpertsAPI, getHotGoodsAPI} from "@/apis/home.js";
import router from "@/router/index.js";
import {ElMessage} from "element-plus";

//当前菜单的选中项，默认选择第一个
const select=ref("hot")
const handleSelect=(index)=>{
  select.value=index
}

// 搜索输入框的值
const searchInput = ref('')


const goods=ref([])
// 获取热门商品
const getHotGoods = async()=> {
  if (select.value === 'hot') {
    // 热门推荐时，获取多个分类的商品
    const categories = ['7000400', '8000400', '7000101']
    let combinedGoods = []
    
    for (const category of categories) {
      const res = await getHotGoodsAPI(category)
      // 每个分类取前5个商品
      combinedGoods = [...combinedGoods, ...(res.slice(0, 5))]
    }
    goods.value = combinedGoods
  } else {
    // 其他分类正常获取
    const res = await getHotGoodsAPI(select.value)
    goods.value = res
  }

  //处理数据，分割tags
  goods.value.forEach((item) => {
    if (typeof item.tags === "string") {
      item.tags = item.tags.split(',')
    }
  })
}
//组件完成初始渲染时发送请求
onMounted(() => {
  getHotGoods()
})

//监听select变化，刷新数据
watch(() => select.value, (newSelect) => {
  getHotGoods()
    }
);

const selectedItem=ref()//当前选中的商品

const visible=ref(false)
const handleCardClick=(item)=> {
  selectedItem.value=item
  router.push(`/detail/${selectedItem.value.gid}`)
  //visible.value = true;//弹出窗口
}

// 搜索商品功能
const searchGoods = () => {
  if (!searchInput.value) {
    ElMessage.warning('请输入搜索关键词');
    return
  }
  router.push({
    path:`/category/${searchInput.value}`,
    query:{
      date:new Date().getTime()
    }
  })
}

// 强制更新输入框的值
function changeMessage() {
  this.$forceUpdate()
}
</script>

<template>
  <el-card class="product-card">
    <el-row>
      <el-col :span="24">
        <h2>热门商品</h2>
      </el-col>
    </el-row>
    <el-row :gutter="35">
      <el-col :span="24">
        <div class="header">
          <div class="title">热门供应推荐</div>
          <div class="more">
            <el-link :underline="false" style="font-size: 12px;">
              更多<el-icon><ArrowRight /></el-icon>
            </el-link>
          </div>
        </div>
        <div class="content">
          <base-dialog :visible="visible" @close="visible = false" >
            <template #message>
              {{ selectedItem}}
            </template>
          </base-dialog>

          <!--  菜单区域-->
          <div class="tabs">
            <el-menu mode="horizontal" @select="handleSelect" default-active="hot" :ellipsis="false">
              <!--    默认选中第一个-->
              <el-menu-item index="hot">热门供应推荐</el-menu-item>
              <el-menu-item index="7000400">苹果</el-menu-item>
              <el-menu-item index="8000104">牛副产品</el-menu-item>
              <el-menu-item index="7000101">柑橘</el-menu-item>
              <el-menu-item index="8000400">鸡</el-menu-item>
              <el-menu-item index="8000103">猪副产品</el-menu-item>
              <el-menu-item index="more">更多</el-menu-item>
                    <el-input class="searchInput" v-model="searchInput" placeholder="搜索更多商品" @keyup.enter="searchGoods">
              <template #suffix>
                <el-button :icon="Search" @click="searchGoods" style="color: white;background-color: #14c131;"></el-button>
              </template>
            </el-input>
          </el-menu>
          </div>

          <!--  数据显示区域-->
          <ul v-for="(item,index) in goods" :key="index">
            <li>
        <!--      商品卡片-->
              <SmallItemCard :item="item" @click="handleCardClick(item)"></SmallItemCard>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped lang="less">
.product-card{
  width: auto;
  height: auto;
  background-color: white;
  margin-bottom: 20px;
}

.header{
  margin-bottom: 15px;
}

.title{
  font-size: 16px;
  color: #444;
  letter-spacing: 0;
  padding-left: 8px;
  border-left: 4px solid #39bf3e;
  float: left;
}

.more{
  float:right;
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  display: inline-grid;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.el-menu{
  border-radius: 5px;
  width: auto;
}

.searchInput{
  width: 250px;
  height: 35px;
  margin: auto;
  margin-right: 10px;
  :deep(.el-input__wrapper) {
    padding: 0 2px 0 10px ;

  }
}

.searchInput input:focus{
  border-color: red;
}

.el-menu-item:hover{
  background-color: white!important;
  outline: 0 !important;
  color: #1fe343 !important;

}
.el-menu-item.is-active {
  background-color: white!important;
  border-bottom-color: #1fe343;
  color: #1fe343  !important ;
}
.tabs{
  box-shadow: 0 0 5px 0 rgba(144, 144, 144, 0.29);
  border-radius: 5px;
  margin-bottom: 10px;
}

.el-menu-item{
  flex: 1;
}
ul {
  position: relative; /* 确保父容器非 static 定位 */
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  float: left;
  list-style: none;
  margin: 0 12px 12px 0;//上 右 下 左

}
.notData{
  height: 400px;
}
</style>